<template>
  <el-dialog
    title="【批量删除子集】 -> 批量添加"
    :visible.sync="dialogVisible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :before-close="handleOffDialog"
    width="30%"
  >
    <div class="warning-title">当前将对符合条件的( {{ uuids.length }} )人，进行相关[子集]删除！</div>
    <el-checkbox :indeterminate="isIndeterminate" size="mini" v-model="checkAll" @change="handleCheckAllChange" style="font-weight: bold;color: #000000;">相关子级名称(全选)</el-checkbox>
    <div style="margin-bottom: 5px;"></div>
    <el-checkbox-group v-model="selectedDataList" size="mini" @change="handleCheckedCitiesChange">
      <el-checkbox
        v-for="item in checkboxData"
        :key="item.fieldCode"
        :label="item.fieldCode"
        style="display: block;margin-bottom: 10px;"
      >
        {{ item.fieldName }}
      </el-checkbox>
    </el-checkbox-group>

    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleOffDialog">关闭</el-button>
      <el-button size="mini" type="primary" @click="handleEditDialog">删除</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {getAction} from "@/api/manage";
import {queryCondition} from "@/api/apiUrl";

export default {
  name: 'DelChildren',
  components: {},
  data() {
    return {
      dialogVisible: false,
      checkAll: false,
      selectedDataList: [], // 选中的数据
      checkboxData: [], // 多选框数据
      isIndeterminate: false,
      uuids: [] // 选中人员数据
    }
  },
  mounted() {},
  methods: {
    handleOpenDialog(uuids) {
      console.log('打开')
      this.uuids = uuids
      this.getConditionsList()
      this.dialogVisible = true
    },
    handleOffDialog() {
      console.log('关闭')
      this.dialogVisible = false
      this.$emit('handleOffDialog')
    },
    handleEditDialog() {
      console.log('处理修改数据')
    },
    handleCheckAllChange(val) {
      this.selectedDataList = val ? this.checkboxData.map(i => i.fieldCode) : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.checkboxData.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkboxData.length
    },
    /* 获取 */
    async getConditionsList() {
      const result = await getAction(queryCondition.conditionsList)
      const filter_item = result.data.find(res => res.type === this.$store.getters.getTableName)
      this.checkboxData = filter_item.list
    },
  }
}
</script>

<style scoped>
  /*/deep/ .el-cascader .el-input .el-input__inner {*/
  /*  height: 40px !important;*/
  /*  line-height: 40px !important;*/
  /*}*/

  /deep/ .el-dialog__body {
    height: 400px !important;
    overflow-y: auto;
  }

  .warning-title{
    color: #ff0000;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }
</style>
